.indicator-sources {
    --description-heading: var(
        --indicator-sources-description-heading,
        #{$blue-90}
    );
    --key-data-title: var(--indicator-sources-key-data-title, #{$blue-90});
    --content: var(--indicator-sources-content, #{$blue-60});

    .source {
        color: var(--content);

        .description {
            margin-bottom: 16px;

            > *:first-child {
                margin-top: 0;
            }

            > *:last-child {
                margin-bottom: 0;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                color: var(--description-heading);
                font-size: 1em;
                margin-top: 14px;
                margin-bottom: 6px;
            }

            p {
                margin: 6px 0;
            }

            ol {
                margin-left: 1.2em;
            }

            ul {
                margin-left: 1em;
            }
        }

        .source-key-data-blocks {
            --code-snippet-text: #{$blue-50};

            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
            gap: 16px;

            .wp-code-snippet {
                margin-top: 16px;
                margin-bottom: 0;
            }
        }

        .source-key-data--span-2 {
            grid-column: span 2;
        }

        .source-key-data__title {
            color: var(--key-data-title);
            white-space: nowrap;
        }

        .source-key-data__content {
            p {
                font-size: inherit;
            }
            > p:first-of-type {
                margin-top: 0;
            }
            > p:last-of-type {
                margin-bottom: 0;
            }
        }

        a {
            @include owid-link-90;
            color: inherit;
        }
    }
}

.indicator-sources div.NonExpandable {
    --title: var(--non-expandable-title, currentColor);
    --border: var(--non-expandable-border, #d0dae3);

    --title-size: var(--non-expandable-title-size, 1rem);
    --content-size: var(--non-expandable-content-size, 0.875rem);

    padding: 16px 0;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    &--stacked {
        border-bottom: none;
    }

    h4.NonExpandable__title {
        @include h4-semibold;
        margin: 0;
        margin-bottom: 8px;
        color: var(--title);
        font-size: var(--title-size);
    }

    div.NonExpandable__content {
        @include body-3-medium;
        font-size: var(--content-size);
    }
}
